<template>
    <div>
        <scroller lock-x height="200px" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="200">
      <div class="box2">
        <p v-for="i in bottomCount">placeholder {{i}}</p>
        <load-more tip="loading"></load-more>
      </div>
    </scroller>
    </div>
</template>
<script>
import { Scroller, LoadMore } from "vux";
export default {
  components: {
    Scroller,
    LoadMore
  },
  data() {
    return { bottomCount: 20 };
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.scrollerBottom.reset({ top: 0 });
    });
  },
  methods: {
    onScrollBottom() {
      if (this.onFetching) {
        // do nothing
      } else {
        this.onFetching = true;
        setTimeout(() => {
          this.bottomCount += 10;
          this.$nextTick(() => {
            if (this.bottomCount > 50) {
              this.$refs.scrollerBottom.donePullup();
              return false;
            } else {
              this.$refs.scrollerBottom.reset();
            }
          });
          this.onFetching = false;
        }, 2000);
      }
    }
  }
};
</script>
<style>
</style>
